<template>
  <view class="whole">
    <u-toast ref="uToast" />
    <view class="">
      <block v-for="(item, index) in list.data" :key="index">
        <view class="listwhole" @click="tonewbackcard(item.id, index)">
          <view class="list_left">
            <image
              src="../../static/bank_card.png"
              mode=""
              class="list_left_img"
              v-if="item.bank_card_phone"
            ></image>
            <image
              src="../../static/alipay_background.png"
              mode=""
              class="list_left_img"
              v-if="item.zfb_account"
            ></image>
            <view class="list_left_right">
              <text>{{ item.real_name }}</text>
              <text>{{ item.bank_card_number }}</text>
              <text>{{ item.zfb_account }}</text>
            </view>
          </view>
          <view class="list_right_img">
            <image
              src="../../static/circular.png"
              mode=""
              class="list_right_img"
              v-if="circular != index"
            ></image>
            <image
              src="../../static/Selected.png"
              mode=""
              class="list_right_img"
              v-if="circular == index"
            ></image>
          </view>
        </view>
      </block>
    </view>
    <view class="bottom">
      <view class="bottom_button" @click="submit">确定</view>
    </view>
  </view>
</template>

<script>
import api from "../../api/api";
export default {
  data() {
    return {
      list: {
        data: [],
      },
      circular: 0,
      priceid: null,
    };
  },
  onLoad() {
    this.list.data = JSON.parse(uni.getStorageSync("walletcard"));
    // this.list.data.forEach(el => {
    //   if(el.bank_card_number){
    //     el.bank_card_number = el.bank_card_number.replace(/^(\d{4})\d+(\d{4})$/,"$1 **** **** $2");
    //   }
    //   if(el.zfb_account){
    //     el.zfb_account = el.zfb_account.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");
    //   }
    // });
    this.priceid = this.list.data[0].id;
  },
  onShow() {},
  methods: {
    tonewbackcard(id, index) {
      this.circular = index;
      this.priceid = id;
      console.log(this.priceid, "uiddd");
    },
    async submit() {
      let res = await api.setPayment({
        query: {
          payment_id: this.priceid,
          wallet_id: uni.getStorageSync("walletid"),
        },
        method: "post",
      });
      if (res.code == 0) {
        this.$refs.uToast.show({
          title: "修改成功",
          type: "succes",
        });
        uni.navigateBack({
          delta: 1, // 回退前 delta(默认为1) 页面
        });
      } else {
        this.$refs.uToast.show({
          title: res.msg,
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  background: $bg-color1;
  min-height: 100vh;
  padding: 1rpx 0;
  .listwhole {
    display: flex;
    align-content: center;
    justify-content: space-between;
    margin: 30rpx;
    padding: 30rpx;
    border-radius: 24rpx;
    // background-image: url("/static/bank_card_img.png");
    // background-repeat: no-repeat;
    // background-position: center;
    // background-attachment: fixed;
    // background-size: cover;
    background: $bg-color3;
    .list_left {
      display: flex;
      .list_left_img {
        margin: auto 0;
        width: 80rpx;
        height: 80rpx;
      }
      .list_left_right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 30rpx;
        color: $text-color1;
        font-size: 28rpx;
        text:nth-child(n + 1) {
          margin-top: 10rpx;
        }
      }
    }
    .list_right_img {
      margin: auto 0;
      width: 30rpx;
      height: 30rpx;
    }
    .list_new {
      color: #0c1125;
      margin: 0 auto;
      .list_new_img {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }
    }
  }
  .bottom {
    padding: 24rpx 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;

    // width: 750rpx;
    height: 138rpx;
    &_button {
      margin: 0 auto;
      width: 650rpx;
      height: 90rpx;

      color: $text-color1;
      background: $button;
      background-repeat: no-repeat;
      // background-attachment: fixed;
      background-size: 100% 100%;
      border-radius: 16rpx;

      font-size: 32rpx;
      font-weight: 400;
      line-height: 90rpx;
      text-align: center;
    }
  }
}
</style>
